<template>
    <div>
        <h2>分页展示及按行渲染颜色</h2>
        <table>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>price</td>
                <td>img</td>
                <td>author</td>
            </tr>
            <tr v-for="(i,index) in cate" :key="i.id">
                <td :class="{aa:index==1,bb:index==0,cc:index==2}">{{i.id}}</td>
                <td :class="{aa:index==1,bb:index==0,cc:index==2}">{{i.name}}</td>
                <td :class="{aa:index==1,bb:index==0,cc:index==2}">{{i.price}}元</td>
                <td :class="{aa:index==1,bb:index==0,cc:index==2}">{{i.img}}</td>
                <td :class="{aa:index==1,bb:index==0,cc:index==2}">{{i.author}}</td>
            </tr>
        </table>
        <p>
            <button @click="frist_page()">首页</button>
            <button @click="up_page()">上一页</button>
            <button v-for="p in page_list" :key="p" @click="get_page(p)">{{p}}</button>
            <button @click="down_page()">下一页</button>
            <button @click="last_page()">尾页</button>
        </p>
    </div>
</template>

<script>
import {get_listtwo} from "../axios_api/api.js"
import axios from "axios"
export default {
    name:"showbook1",
    data() {
        return {
            cate:"",
            page_list:[],
            p:1,
            all_page:""
        }
    },
    methods:{
        get_info(){
            var data={"page":this.p}
            axios({
                url:"http://127.0.0.1:8000/week4/page/",
                method:"get",
                params:data
            }).then(res=>{
                console.log(res.data)
                this.page_list=res.data.data.page_list,
                this.all_page = res.data.data.all_page,
                this.cate = res.data.data.data
            })
        },
        get_page(p){
            this.p = p
            this.get_info()
        },
        frist_page(){
            this.p = 1
            this.get_info()
        },
        last_page(){
            this.p = this.all_page
            this.get_info()
        },
        up_page(){
            if(this.p>1){
                this.p-=1
                this.get_info()
            }else{
                this.p=1
                this.get_info()
            }
        },
        down_page(){
            if(this.p = this.all_page){
                this.get_info()
            }else{
                this.p+=1
                this.get_info()
            }
        }

    },
    created(){
        this.get_info()
    }
}
</script>

<style>
.aa{
    background-color:palegreen;
}
.bb{
    background-color: orchid
}
.cc{
    background-color: blue
}


</style>
